<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表渲染</title>
	<script src="lib/vue-2.1.3-min.js"></script>
	<script src="lib/lodash.min.js"></script>
</head>
<body>
	<div id="exp1">

		<ul>
			<li v-for="item in players">{{item}}</li>
		</ul>
		<hr>
		<ul>
			<li v-for="(item,index) in players">{{game}} - {{index+1}} - {{item}}</li>
		</ul>
	</div>
	<script>
		var vm = new Vue({
			el: "#exp1", 
			data: {
				game: "ASL",
				players: ["flash", "sea", "last", "jeadong"]
			}
		});
	</script>
	<hr>
	<div id="exp2">
		<ul>
			<template v-for="item in items">
				<li>{{ item.message }}</li>
				
			</template>
		</ul>
	</div>
	<script>
		var vm = new Vue({
			el: "#exp2", 
			data: {
				items: [
					{message: "foo"},
					{message: "bar"}
				]
			}
		});
	</script>

	<hr>
	<div id="exp3">
		<ul>
			<template v-for="value in user">
				<li>{{value}}</li>
				
			</template>
		</ul>
		<ul>
			<template v-for="(value, key) in user">
				<li>{{key}} : {{ value }}</li>
				
			</template>
		</ul>
		<ul>
			<template v-for="(value, key, index) in user">
				<li>{{index}} - {{key}} : {{ value }}</li>
				
			</template>
		</ul>
	</div>
	<script>
		var vm = new Vue({
			el: "#exp3", 
			data: {
				user: {
					lastname: "foo",
					firstname: "bar",
					age: 20
				}
			}
		});
	</script>

	<div id="exp4">
		<span v-for="n in 10">{{n}} - </span>
	</div>
	<script>
		var vm = new Vue({
			el: "#exp4"
		})
	</script>

	<hr>
	<h1>todolist demo</h1>
	<div id="todolist">
		<input type="text" v-model="newText"> <button @click="addText">add</button>
		<ul>
			<todo-item v-for="(item,index) in items" v-bind:todo="item" v-bind:key="item.id" :index="index" @del="remove(index)"></todo-item>
		</ul>
	</div>
	<script>
		Vue.component("todo-item", {
			props:["todo", "index"],
			template: "<li>{{todo.id}} - {{todo.text}} <button @click='$emit(\"del\")'>X</button></li>"
		});
		var vm = new Vue({
			el: "#todolist", 
			data: {
				newText: null,
				curId: 0,
				items:[]
			},
			methods: {
				addText: function() {
					
					var item = { id: ++this.curId, text: this.newText};
					this.items.push(item);
					this.newText = null;
				},
				remove: function(index) {
					this.items.splice(index, 1);
					return true;
				}
			}
		});
		vm._events["del"] = function() {
			console.log("events del");
		}
	</script>
</body>
</html>